<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button onclick="onOpenType0()">0（信息框，默认）</button>
<button onclick="onOpenType1()">1（页面层）</button>
<button onclick="onOpenType2()">2（iframe层 可以嵌套一个网页）</button>
<button onclick="onOpenType3()">3（加载层）</button>
<button onclick="onOpenType4()" id="tip">4（tips层）</button>
<div id="divId" style="display: none">
    用户名：<input type="text"><br>
    密码：<input type="text"><br>
</div>
<script>
    function onOpenType0() {
        layer.open({
            type: 0,
            content: '弹出的内容'
        });
    }

    function onOpenType1() {
        //页面层
        layer.open({
            type: 1,
            area: ['420px', '240px'], // 宽高
            //content: '<div style="padding: 11px;">任意 HTML 内容</div>'
            content: $('#divId')
        });
    }

    function onOpenType2() {
        //iframe
        layer.open({
            type: 2,
            title: 'iframe test',
            shadeClose: true, // 点击遮罩区域，关闭弹层
            shade: 0.8, // 遮罩透明度
            area: ['380px', '80%'],
            content: 'layer1.html' // iframe 的 url
        });
    }

    function onOpenType3() {
        layer.open({
            type: 3
        });
    }

    function onOpenType4() {
        layer.open({
            type: 4,
            content: ['一个 tips 层', '#tip']
        });
    }
</script>
</body>
</html>